\chapter{Website Application}
\label{programmingwebApp}

\section{Introduction}

The information presented in this chapter have been extracted mainly from websites from the World Wide Web as \cite{wikipedia} 
and \cite{w3schools} . This is a small guide that will give the reader an idea of the technology used for implementing the website, 
especially the languages that are used. However, in order to a program developer wants to continue the development of our 
application is highly recommended to read the bibliography provided in the end of each section.

A \emph{web site} is a collection of related web pages, images, or other digital assets that are addressed relative to a 
common Uniform Resource Locator (URL), often consisting of only the domain name, or the IP address, and the root path ('/') 
in an Internet Protocol-based network. A web site is hosted on at least one web server, accessible via a network such as 
the Internet or a private local area network.

A \emph{web page} in a web site is a document, typically written in plain text interspersed with formatting instructions 
of Hypertext Markup Language (HTML, XHTML). Web pages frequently subsume other resources such as style sheets, scripts and 
images into their final presentation. A web page may incorporate elements from other websites with suitable markup anchors. 
Web pages are accessed and transported with the Hypertext Transfer Protocol (HTTP), which may optionally employ encryption 
(HTTP Secure, HTTPS) to provide security and privacy for the user of the web page content. The user's application, often a 
web browser, renders the page content according to its HTML markup instructions onto a display terminal.

A \emph{static website} is one that has web pages stored on the server in the format that is sent to a client web browser. 
It is primarily coded in Hypertext Markup Language (HTML). In summary, visitors are not able to control what information they 
receive via a static website, and must instead settle for whatever content the website owner has decided to offer at that time.

A \emph{dynamic website} is one that changes or customizes itself frequently and automatically, based on certain criteria. 
There are two types of dynamic web sites:
\begin{enumerate}
  \item \textbf{Client-side scripting and content creation}

  Using client-side scripting to change interface behaviors within a web page, in response to mouse or keyboard actions or at 
  specified timing events. In this case the dynamic behavior occurs within the presentation. Such web pages use presentation 
  technology called rich interfaced pages. Client-side scripting languages like JavaScript, used for Dynamic HTML (DHTML) 
  technologies, are frequently used to orchestrate media types (animations, changing text, etc.) of the presentation. The 
  scripting also allows use of remote scripting, a technique by which the DHTML page requests additional information from a 
  server, using a hidden Frame, XMLHttpRequests, or a Web service. The Client-side content is generated on the user's computer. 
  The web browser retrieves a page from the server, then processes the code embedded in the page and displays the retrieved 
  page's content to the user.

  \item \textbf{Server-side scripting and content creation}

  Using server-side scripting to change the supplied page source between pages, adjusting the sequence or reload of the web 
  pages or web content supplied to the browser. Server responses may be determined by such conditions as data in a posted HTML 
  form, parameters in the URL, the type of browser being used, the passage of time, or a database or server state. Such web 
  pages are often created with the help of server-side languages such as PHP, Perl, ASP.NET, JSP, and other languages. These 
  server-side languages typically use the Common Gateway Interface (CGI) to produce dynamic web pages. Server-side dynamic 
  content is more complicated: (1) The client sends the server the request. (2) The server receives the request and processes 
  the server-side script such as [PHP] based on the query string, HTTP POST data, cookies, etc.
\end{enumerate}

The \emph{main purpose} of a dynamic website is automation. A dynamic website can operate more effectively, be built more 
efficiently and is easier to maintain, update and expand. It is much simpler to build a template and a database than to 
build hundreds or thousands of individual, static HTML web pages.

\section{DHTML}

\emph{Dynamic HTML}, or DHTML, is an umbrella term for a collection of technologies used together to create interactive and 
animated web sites by using a combination of a static markup language (such as HTML), a client-side scripting language (such 
as JavaScript), a presentation definition language (such as CSS), and the Document Object Model.

DHTML allows scripting languages to change variables in a web page's definition language, which in turn affects the look and 
function of otherwise "static" HTML page content, after the page has been fully loaded and during the viewing process. Thus 
the dynamic characteristic of DHTML is the way it functions while a page is viewed, not in its ability to generate a unique 
page with each page load.

For learning more about the DHTML visit \cite{DHTMLtutorial}.

\section{HTML}

\emph{HTML}, which stands for HyperText Markup Language, is the predominant markup language for web pages. A markup language 
is a set of markup tags, and HTML uses markup tags to describe web pages. HTML is written in the form of HTML elements 
consisting of "tags" surrounded by angle brackets (like \textless html\textgreater) within the web page content. HTML tags 
normally come in pairs like \textless b\textgreater and \textless/b\textgreater. The first tag in a pair is the start tag, the 
second tag is the end tag The purpose of a web browser is to read HTML documents and display them as web pages. The browser 
does not display the HTML tags, but uses the tags to interpret the content of the page.

HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create 
interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, 
paragraphs, lists, links, quotes and other items. It can embed scripts in languages such as JavaScript which affect the behavior 
of HTML webpages. HTML can also be used to include Cascading Style Sheets (CSS) to define the appearance and layout of text and 
other material.

HTML markup consists of several key components, including elements (and their attributes), character-based data types, character 
references and entity references. Another important component is the document type declaration, which specifies the Document 
Type Definition. As of HTML 5, no Document Type Definition will need to be specified and will only determine the layout mode.
An example of HTML code is didplayed below:
\vspace{0.5cm}
  \begin{lstlisting}[captionpos=b,label=helloWorld, caption={\textit{A simple "helloworld" code in HTML}} ,
								  language=HTML, basicstyle=\small, frame=single]
    <!doctype html>
    <html>
      <head>
	<title>Hello HTML</title>
      </head>
      <body>
	<p>Hello World!</p>
      </body>
    </html>
  \end{lstlisting}

For learning more about the HTML visit \cite{HTMLtutorial} and read the \cite{HTMLProposedBook}.

\section{CSS}

\emph{Cascading Style Sheets} (CSS) is a style sheet language used to describe the presentation semantics (the look and 
formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and 
XHTML, but the language can also be applied to any kind of XML document, including SVG and XUL.

CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from 
document presentation, including elements such as the layout, colors, and fonts. This separation can improve content 
accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages 
to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design).

CSS has a simple \emph{syntax} and uses a number of English keywords to specify the names of various style properties.A style 
sheet consists of a list of rules. Each rule consists of one or more selectors and a declaration block. A declaration-block 
consists of a list of declarations in braces. Each declaration consists of a property, a colon (:), a value, then a semi-colon (;).
In CSS, selectors are used to declare which of the markup elements a style applies to, a kind of match expression. Selectors may 
apply to all elements of a specific type, or only those elements that match a certain attribute; elements may be matched depending 
on how they are placed relative to each other in the markup code, or on how they are nested within the document object model.

There are 4 ways of implementing CSS:
\begin{enumerate}
 \item Declare inline. 
 \item Embed into the head of your document.
 \item Link to an external CSS file.
 \item import a CSS file
\end{enumerate}

\textbf{Use of CSS:}Prior to CSS, nearly all of the presentational attributes of HTML documents were contained within the HTML 
markup; all font colors, background styles, element alignments, borders and sizes had to be explicitly described, often repeatedly, 
within the HTML. CSS allows authors to move much of that information to a separate style sheet resulting in simpler HTML markup.

For learning more about the CSS visit \cite{CSStutorial} and read the \cite{CSSProposedBook}.

\section{JAVASCRIPT}

\emph{JavaScript} is an implementation of the ECMAScript language standard and is typically used to enable programmatic access 
to computational objects within a host environment. It can be characterized as a prototype-based object-oriented scripting 
language that is dynamic, weakly typed and has first-class functions.The key design principles within JavaScript are taken from 
the Self and Scheme programming languages. JavaScript is primarily used in the form of client-side JavaScript, implemented as part 
of a web browser in order to provide enhanced user interfaces and dynamic websites.

The primary use of JavaScript is to write functions that are embedded in or included from HTML pages and that interact 
with the Document Object Model (DOM) of the page. Some simple examples of this usage are:
\begin{enumerate}
  \item Opening or popping up a new window with programmatic control over the size, position, and attributes of the new 
	window (e.g. whether the menus, toolbars, etc. are visible).
  \item Validating input values of a web form to make sure that they are acceptable before being submitted to the server.
  \item Changing images as the mouse cursor moves over them: This effect is often used to draw the user's attention to 
	important links displayed as graphical elements.
\end{enumerate}

Because JavaScript code can run locally in a user's browser (rather than on a remote server), the browser can respond to user 
actions quickly, making an application more responsive. Furthermore, JavaScript code can detect user actions which HTML alone 
cannot, such as individual keystrokes. A web browser is by far the most common host environment for JavaScript. Web browsers 
typically use the public API to create "host objects" responsible for reflecting the DOM into JavaScript. The web server is 
another common application of the engine. A JavaScript webserver would expose host objects representing an HTTP request and 
response objects, which a JavaScript program could then manipulate to dynamically generate web pages.
The JavaScripts can be placed in any of the following locations:
\begin{enumerate}
 \item Between the HTML document's head tags.
 \item Within the HTML document's body (i.e. between the body tags).
 \item In an external file (and link to it from your HTML document).
\end{enumerate}

An example of a standards-conforming web page containing JavaScript (using HTML 4.01 syntax) would be the following:
\vspace{0.5cm}
  \begin{lstlisting}[captionpos=b,label=exampleJSHTML, caption={\textit{JavaScript code within HTML code}} ,
								  language=HTML, basicstyle=\small, frame=single]
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
      <head><title>simple page</title></head>
      <body>
	<script type="text/javascript">
	  document.write('Hello World!');</script>
	<noscript>
	<p>Your browser either does not support JavaScript, 
	or you have JavaScript turned off.</p></noscript>
      </body>
    </html>
  \end{lstlisting}

For learning more about the JavaScript visit \cite{JavaScripttutorial} and read the \cite{javaScriptProposedBook}.

\section{AJAX}
\emph{AJAX} (shorthand for Asynchronous JavaScript and XML) is a group of interrelated web development techniques used on the 
client-side to create interactive web applications. AJAX is a technique for creating fast and dynamic web pages. With Ajax, web 
applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior 
of the existing page. The use of Ajax techniques has led to an increase in interactive or dynamic interfaces on web pages. Data is 
usually retrieved using the XMLHttpRequest object. Despite the name, the use of XML is not actually required, and the requests do 
not need to be asynchronous. 

You can see how AJAX works in \emph{Figure \ref{ajaxImage}}

\begin{figure}[ht]
\centering
\includegraphics[width=1\textwidth ]{Appendices/images/ajax.png} 
  \caption{How AJAX works}
\label{ajaxImage}
\end{figure}

Like DHTML and LAMP, Ajax is not a technology in itself, but a group of technologies. Ajax uses a combination of HTML and CSS to 
mark up and style information. The DOM is accessed with JavaScript to dynamically display, and to allow the user to interact with, 
the information presented. JavaScript and the XMLHttpRequest object provide a method for exchanging data asynchronously between 
browser and server to avoid full page reloads.

For more information about AJAX go to \cite{Ajaxtutorial} and read the \cite{AjaxProposedBook}.

\section{PHP}

\emph{PHP: Hypertext Preprocessor} is a widely used, general-purpose scripting language that was originally designed for web 
development to produce dynamic web pages. For this purpose, PHP code is embedded into the HTML source document and interpreted by 
a web server with a PHP processor module, which generates the web page document. As a general-purpose programming language, PHP 
code is processed by an interpreter application in command-line mode performing desired operating system operations and producing 
program output on its standard output channel. It may also function as a graphical application. PHP is available as a processor 
for most modern web servers and as a standalone interpreter on most operating systems and computing platforms.

PHP is a general-purpose scripting language that is especially suited to server-side web development where PHP generally runs 
on a web server. Any PHP code in a requested file is executed by the PHP runtime, usually to create dynamic web page content. 
PHP primarily acts as a filter, taking input from a file or stream containing text and/or PHP instructions and outputs another 
stream of data; most commonly the output will be HTML. In \emph{Figure \ref{phpImage}} is how PHP processes a request:

\begin{figure}[ht]
\centering
\includegraphics[width=1\textwidth ]{Appendices/images/dcc-work-flow.png} 
  \caption{Diagram showing out how PHP process a request}
\label{phpImage}
\end{figure}


\emph{PHP Syntax: }PHP only parses code within its delimiters. Anything outside its delimiters is sent directly to the output 
and is not processed by PHP. The most common delimiters are \textless?php to open and ?\textgreater to close PHP sections. The 
first form of delimiters, \textless?php and ?\textgreater, in XHTML and other XML documents, creates correctly formed XML 
'processing instructions'. This means that the resulting mixture of PHP code and other markup in the server-side file is itself 
well-formed XML. An example of PHP code embedded in HTML can be seen below:
\vspace{0.5cm}
  \begin{lstlisting}[captionpos=b,label=php_example, caption={\textit{PHP code embedded within HTML code}} ,
								  language=PHP, basicstyle=\small, frame=single]
    <!DOCTYPE html>
    <html><head>
	<meta charset="utf-8" />
	<title>PHP Test</title>
      </head><body>
      <?php
	  echo 'Hello World';
      /* echo("Hello World"); works as well.*/
      ?></body>
    </html>
  \end{lstlisting}

\emph{Functions} are not first-class functions and can only be referenced by their name, directly or dynamically by a variable 
containing the name of the function. User-defined functions can be created at any time without being prototyped. Functions can be 
defined inside code blocks, permitting a run-time decision as to whether or not a function should be defined.

Basic \emph{object-oriented programming} functionality was added in PHP 3. Object handling was completely rewritten for PHP 5, 
expanding the feature set and enhancing performance. Previously, objects were handled like value types. In the new approach, 
objects are referenced by handle, and not by value. PHP 5 introduced private and protected member variables and methods, along 
with abstract classes and final classes as well as abstract methods and final methods. Also introduced a standard way of 
declaring constructors and destructors, similar like C++, and a standard exception handling model. Furthermore, PHP 5 added 
interfaces and allowed for multiple interfaces to be implemented. There is no virtual table feature in the engine, so static 
variables are bound with a name instead of a reference at compile time.

For more information about PHP go to \cite{PHPtutorial} and read the \cite{PhpProposedBook}.